<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>
		<view class="myBodys">
			<image class="mySucceedImg" src="/static/images/succeedImg.png"></image>
			<view class="succeedBox">
				<h3>支付成功</h3>
				<p>拼表多正在努力打包中！</p>
			</view>
			<view @click.stop="checkAnOrder" class="myBodysButton">查看订单</view>
		</view>
	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '支付结果',
				recList: [],
				pageNum: 1,
				pageSize: 10,
				orderNo: ''
			}
		},
		onLoad(option) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.orderNo = option.orderNo;
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		onShow() {

		},


		methods: {
			checkAnOrder(){
				uni.redirectTo({
					url: `/package/orderAmount/index?orderNo=${this.orderNo}`
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.redirectTo({
					url: `/package/orderAmount/index?orderNo=${this.orderNo}`
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;

		// <view class="myBodys">
		// 	<image class="mySucceedImg" src="/static/images/succeedImg.png"></image>
		// 	<view class="succeedBox">
		// 		<h3>支付成功</h3>
		// 		<p>拼表多正在努力打包中！</p>
		// 	</view>
		// 	<view class="myBodysButton">查看订单</view>
		// </view>
		.myBodys {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.mySucceedImg {
			width: 140rpx;
			height: 140rpx;
			margin: 112rpx 0 16rpx 0;
		}

		.succeedBox {
			
			h3 {
				height: 44rpx;
				    font-size: 32rpx;
				    font-family: 蘋方-簡;
				    font-weight: bold;
				    line-height: 44rpx;
				    color: #000000;
				    text-align: center;
			}

			p {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 40rpx;
				color: #7B7D8D;
				text-align: center;
				margin: 8rpx 0 64rpx 0;
			}
		}
		.myBodysButton{
			    width: 446rpx;
			    height: 88rpx;
			    line-height: 88rpx;
			    background: #F44B5B;
			    opacity: 1;
			    border-radius: 40rpx;
			    font-size: 28rpx;
			    font-family: 蘋方-簡;
			    font-weight: normal;
			    color: #FFFFFF;
			    text-align: center;
			    box-shadow: 0 28rpx 42rpx -26rpx #F44B5B;
		}

		.myPages__MainKong {
			width: 408rpx;
			height: 408rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.myPages__MainItemsTop {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 40rpx;
			color: #2B2B33;
		}

		.myPages__MainItemsBotton {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;
			display: flex;
			justify-content: space-between;
			margin-top: 12rpx;
		}

		.myPages__MainItemsBottonsLeft {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;

			span:nth-child(2) {
				margin-left: 20rpx;
			}
		}

		.myPages__MainItemsBottonsRight {}


		.myPages__Main {
			box-sizing: border-box;
			width: 100%;
			padding: 32rpx;

			.myPages__MainItems {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 40rpx rgba(228, 228, 245, 0.4);
				opacity: 1;
				border-radius: 40rpx;
				height: 146rpx;
				padding: 32rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}
		}

		.myPages__MainItemsTopLeft {
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				margin-right: 14rpx;
			}

			span:nth-child(3) {
				width: 64rpx;
				height: 35rpx;
				background: rgba(240, 65, 77, 0.02);
				border: 2rpx solid #F0414D;
				opacity: 1;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-family: 'DIN';
				font-weight: normal;
				box-sizing: border-box;
				line-height: 35rpx;
				color: #F0414D;
				opacity: 1;
				text-align: center;
			}
		}

		.myPages__MainItemsTopMyItems--actColor {

			.myPages__MainItemsTopMyItemsHeardText {
				color: #7B7D8D !important;
			}

			span {
				color: #7B7D8D !important;
			}
		}

		.myPages__MainItemsTop {
			display: flex;
			justify-content: space-between;
		}

		.myPages__MainItemsTopRight {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 40rpx;
			color: #2B2B33;
		}

		.myPages__MainItemsBottom {
			margin-top: 8rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;
		}

		.myPages__MainItemsTopMyItems {
			height: 84rpx;
			background: #F7F8FC;
			opacity: 1;
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			span {
				display: inline-block;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 26rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}

			span:nth-child(2) {
				margin: 0 24rpx;
			}
		}

		.myPages__MainItemsTopMyItemsHeardText {
			height: 84rpx;
			line-height: 84rpx;
			font-size: 26rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		// <view class="myPages__MainItemsTopMyItems">
		// 	<view class="myPages__MainItemsTopMyItemsHeard">
		// 		<span>收益</span>
		// 		<span>1/2</span>
		// 		<span>+50元</span>
		// 	</view>
		// 	<view class="myPages__MainItemsTopMyItemsHeardText">>
		// 		已入账
		// 	</view>
		// </view>


	}
</style>
